<template>
    <div class="follow-product-list">
        <van-nav-bar title="商品关注" :border="false"
                     left-arrow fixed placeholder
                     @click-left="$router.back()"/>
        <white-space/>
        <empty v-if="emptyProducts" description="您还没有关注任何商品"/>
        <follow-product-list-item v-for="product in products" :key="product.id" :product="product"
                                  @unfollowing="handleUnfollowingProduct(product)"
                                  v-else/>
    </div>
</template>

<script>
  import { NavBar, Toast } from "vant"
  import WhiteSpace from "@/components/WhiteSpace"
  import { follow, security } from "@mall/api-services"
  import FollowProductListItem from "./FollowProductListItem"
  import _ from "lodash"
  import Empty from "@/components/Empty"

  export default {
    name: "FollowProductList",
    components: {
      Empty,
      FollowProductListItem,
      WhiteSpace,
      [NavBar.name]: NavBar,
    },
    computed: {
      emptyProducts() {
        return _.isEmpty(this.products)
      },
    },
    data() {
      return {
        products: [],
      }
    },
    created() {
      this.refreshProducts()
    },
    methods: {
      refreshProducts() {
        const customerId = security.SecurityUserHolder.getUserId()
        follow.FollowServiceV1.getFollowingProducts()
          .customerId(customerId)
          .list()
          .then(pagedProducts => this.products = pagedProducts.elements)
      },
      handleUnfollowingProduct(product) {
        this.productFollowing = false
        const customerId = security.SecurityUserHolder.getUserId()
        follow.FollowServiceV1.unfollowingProduct(customerId, product.id)
          .then(() => Toast("取消收藏"))
          .then(this.refreshProducts)
      },
    },
  }
</script>

<style lang="scss" scoped>
    .follow-product-list {

    }
</style>
